<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="描述" prop="description">
      <el-input v-model="formData.description" />
    </el-form-item>
    <el-form-item label="价格" prop="price">
      <el-input-number v-model="formData.price" />
    </el-form-item>
    <el-form-item label="图片" prop="images">
      <el-upload
        :file-list="formData.fileList!"
        :action="action"
        :headers="{ Authorization: 'Bearer ' + userStore.token }"
        list-type="picture-card"
        @change="handleChange"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="颜色" prop="imageColor">
      <el-color-picker v-model="formData.imageColor" />
    </el-form-item>
    <el-form-item label="功率" prop="power">
      <el-input-number v-model="formData.power" />
    </el-form-item>
    <el-form-item label="温度" prop="temperature">
      <el-input-number v-model="formData.temperature" />
    </el-form-item>
    <el-form-item label="场景" prop="scene">
      <el-input v-model="formData.scene" />
    </el-form-item>
    <el-form-item label="分类ID" prop="categoryId">
      <el-input-number v-model="formData.categoryId" />
    </el-form-item>
    <el-form-item label="评分" prop="rating">
      <el-input v-model="formData.rating" />
    </el-form-item>
    <el-form-item label="销量" prop="sales">
      <el-input-number v-model="formData.sales" />
    </el-form-item>
    <el-form-item label="标题链接" prop="titleLink">
      <el-input v-model="formData.titleLink" />
    </el-form-item>
    <el-form-item label="副标题" prop="subtitle">
      <el-input v-model="formData.subtitle" />
    </el-form-item>
    <el-form-item label="推荐" prop="isRecommended">
      <el-switch v-model="formData.isRecommended" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, inject, reactive } from "vue";
import { ElMessage } from "element-plus";
import { createProduct, updateProduct } from "@/api/product";
import type {
  FormInstance,
  UploadFile,
  UploadFiles,
  UploadUserFile,
} from "element-plus";
import { useUserStore } from "@/store/user";
import { Product } from "@/types";

const userStore = useUserStore();
const action = import.meta.env.VITE_API_URL + "/upload/file";
const formRef = ref<FormInstance | null>(null);
const emits = defineEmits(["error", "success"]);
const dialogType = inject("dialogType", ref<"add" | "edit">("add"));
const formData = reactive<
  Partial<Product> & {
    fileList?: UploadUserFile[];
  }
>({
  name: "",
  description: "",
  price: 0,
  imageColor: "",
  power: 0,
  temperature: 0,
  scene: "",
  categoryId: undefined,
  rating: "",
  sales: 0,
  titleLink: "",
  images: "",
  subtitle: "",
  isRecommended: true,
});
const templateData = inject("formData", ref<Partial<Product>>());
if (templateData.value) {
  Object.assign(formData, templateData.value);
  formData.fileList = templateData.value.images
    ?.split(",")
    .map((url) => ({ url })) as any;
}
const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  images: [{ required: true, message: "请上传图片", trigger: "change" }],
};

const handleChange = (file: UploadFile, fileList: UploadFiles) => {
  console.log("上传图片", file, fileList);
  formData.images = fileList
    .map((file) => (file.response as any)?.url)
    .join(",");
};

const submit = async () => {
  try {
    await formRef.value?.validate();
    if (dialogType.value === "add") {
      await createProduct(Object.assign({}, formData, { fileList: undefined }));
      ElMessage.success("添加成功");
      emits("success");
    } else {
      await updateProduct(formData.id!, formData);
      ElMessage.success("更新成功");
      emits("success");
    }
  } catch (error) {
    emits("error");
  }
};

defineExpose({
  submit,
});
</script>
